<!--
 * @Author: your name
 * @Date: 2021-02-25 14:26:50
 * @LastEditTime: 2021-02-25 15:54:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\about-us\index.vue
-->
<template>
  <div class="w1200auto aboutUs">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem" />
    <div class="about_us mlr0 clearfix" id="about_us">
        <ul class="nav_title plr0 mlr0 nav_title-lz s3 fl">
            <li class="s12 size14 b pointer lh15 bg-theme about_nav_active">{{$t('About Eyecedar')}}</li>
            <li class="s12 size14 b pointer lh15 bg-theme">{{$t('Why Choose Us')}}</li>
            <li class="s12 size14 b pointer lh15 bg-theme">{{$t('Journal')}}</li>
            <li class="s12 size14 b pointer lh15 bg-theme">{{$t('Shipping & Returns')}}</li>
        </ul>
        <div class="content s9 fl spacing plr15">
            <!-- About Eyecedar start -->
            <div class="content_item" style="display:block;">
                <!-- <h2 class="title">Zenni Optical was founded in 2003 by two scientists to answer this question:</h2>
                <p class="lh15 mb10 size15">doesn't everyone doserve to look good while wearing an affordable pair of glasses? Thus Zenni was
                    born in the San Franciso Bay Area-a natural fit in the home of forward-thinking tech-savvy
                    companies.</p>
                <p class="lh15 mb10 size15">doesn't everyone doserve to look good while wearing an affordable pair of glasses? Thus Zenni was
                    born in the San Franciso Bay Area-a natural fit in the home of forward-thinking tech-savvy
                    companies.</p>
                <div class="principles">
                    <h4>Zenni Optical was built upon the following principles,and is dedicated to fulfilling them:</h4>
                    <ul>
                        <li>
                            <i class="fa fa-square" aria-hidden="true"></i>
                            To provide the most affordable eyeglasses to people all over the world
                        </li>
                        <li>
                            <i class="fa fa-square" aria-hidden="true"></i>
                            To provide the most affordable eyeglasses to people all over the world
                        </li>
                        <li>
                            <i class="fa fa-square" aria-hidden="true"></i>
                            To provide the most affordable eyeglasses to people all over the world
                        </li>
                        <li>
                            <i class="fa fa-square" aria-hidden="true"></i>
                            To provide the most affordable eyeglasses to people all over the world
                        </li>
                    </ul>
                </div> -->
                <p class="mb50 title lh15">{{$t('Eyecedar is a professional online retailer of glasses. Product types include prescription glasses, prescription sunglasses, blue light blocking glasses, non-prescription fashion glasses, reading glasses, etc. We are committed to designing and manufacturing high-quality glasses products and providing professional and reliable services.')}}</p>
                 <p class="lh15 mb10 size15">{{$t('Our promises')}}:</p>
                 <p class="lh15 mb10 size15">{{$t('Ensure that all customers will get the best customer experience.')}}</p>
                 <p class="lh15 mb10 size15">{{$t('Provide a 2-year warranty on all prescription eyeglass frames and sunglasses.')}}</p>
                 <p class="lh15 mb10 size15">{{$t('Provide the most affordable glasses and the best quality optical lenses.')}}</p>
                 <p class="lh15 mb10 size15">{{$t('Provide safe and convenient online order glasses service.')}}</p>
                 <p class="lh15 mb10 size15">{{$t('Provide 30 days free worry-free return policy.')}}</p>
                 <p class="lh15 mb10 size15">{{$t('Provide fast international logistics and delivery, express shipping ensures that orders are received within 4-6 days.')}}</p>
                 <p class="mb50">{{$t('Provide satisfactory and excellent customer support.')}}</p>
                 <p class="mb0 size15 c333 lh15">{{$t('Express Shipping')}}</p>
            </div>
            <!-- About Eyecedar end -->
            <!-- Why Choose Us start -->
            <div class="content_item">
                <img class="mb30 img" :src="require('~/assets/image/about_us/about_7.png')" alt="">
                <p class="mb30 lh15 size15 c333">{{$t('We are committed to designing and manufacturing high-quality glasses products, and provide professional and reliable services.To ensure that all customers will get the best customer experience, 2-year quality guarantee on all prescription eyeglass frames and sunglasses, 30-day free return policy, and excellent customer support.')}}</p>
                <div class="choose_box">
                    <ul class="flex choose_box_ul spacing mb0">
                        <li class="choose_box_li mb20 ptb15 plr10 spacing">
                            <h3 class="choose_box_title size16 text_c mb10 b">{{$t('100% Satisfaction')}}</h3>
                            <p class="size12 mb0 lh15">
                               {{$t('We offer no-hassle 30-day returns on all orders. You have thirty (30) days from the date you receive the glasses to call us or email for a return request, if you want to return them for any reason.')}}
                            </p>
                        </li>
                        <li class="choose_box_li mb20 ptb15 plr10 spacing">
                            <h3 class="choose_box_title size16 text_c mb10 b">{{$t('Quality Warranty')}}</h3>
                            <p class="size12 mb0 lh15">
                                {{$t('We carefully select each pair of glasses for you, and provide 2 years of quality repair service.')}}
                            </p>
                        </li>
                        <li class="choose_box_li mb20 ptb15 plr10 spacing">
                            <h3 class="choose_box_title size16 text_c mb10 b">{{$t('Virtual try-on')}}</h3>
                            <p class="size12 mb0 lh15">
                                {{$t('Use our online try-on system, upload your photo in all product lists, you can get the wearing effect in real time and help you choose glasses style.')}}
                            </p>
                        </li>
                        <li class="choose_box_li ptb15 plr10 mb0 spacing">
                            <h3 class="choose_box_title size16 text_c mb10 b">{{$t('Safe and secure shopping')}}</h3>
                            <p class="size12 mb0 lh15">
                                {{$t("We utilize industry-standard Secure Sockets Layer (SSL) technology to allow for the encryption of potentially sensitive information such as your name, address and other critically sensitive information like your credit card details during checkout.")}}
                            </p>
                        </li>
                        <li class="choose_box_li ptb15 plr10 mb0 spacing">
                            <h3 class="choose_box_title size16 text_c mb10 b">{{$t('Excellent Service')}}</h3>
                            <p class="size12 mb0 lh15">
                                {{$t('Our professional customer service team will answer any questions about purchase and after-sales at any time.')}}
                            </p>
                        </li>
                        <li class="choose_box_li ptb15 plr10 mb0 spacing">
                            <h3 class="choose_box_title size16 text_c mb10 b">{{$t('Speedy Delivery')}}</h3>
                            <p class="size12 mb0 lh15">
                                {{$t('We deliver glasses directly to your door with most orders arrival within 7 days.')}}
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- Why Choose Us end -->
            <!-- Journal start -->
            <div class="content_item">
                <img class="Journal_img img mb50" :src="require('~/assets/image/about_us/about_1.jpg')" alt="">
                <h4 class="size18 content_item_title b lh14 mb10">{{$t('Essential & More')}}</h4>
                <p class="lh15 mb10 size15">{{$t('Light from the darkness. Color can affect our mood. The important thing is to find the connection. Sunny colors depict a rainbow of hope, and classic colors create a calm and stable atmosphere.')}}</p>
                <img class="Journal_img img mb50" :src="require('~/assets/image/about_us/about_3.jpg')" alt="">
                <h4 class="size18 content_item_title b lh14 mb10">{{$t('Organic fashion')}}</h4>
                <p class="lh15 mb10 size15">{{$t("The value we give to materials and crafts is increasing day by day. We respect nature, stay in nature, and work tirelessly for nature. Circular design is a zero-waste design, aiming to seek solutions that can solve increasingly serious environmental and socio-economic problems, and the design respects the environment more. The production cycle has been redesigned to reduce waste; the design of clothing, accessories and items adheres to the principle of durability, making repairs a new habit. The new trend is to re-evaluate what we use, and to clarify when the boundary is sufficient. Therefore, 'active' design and item design with extraordinary characteristics reflect safety, sustainability and practicality. In the design, this concept is embodied in simple, refined, and minimal lines, which are presented through round, peaceful and warm shapes. Pastel color tone, slightly brown, exudes a warm and comfortable feeling, with gray, neutral brown, black, and even combined with white, showing a unique graphic charm.")}}</p>
                <img class="Journal_img img mb50" :src="require('~/assets/image/about_us/about_2.jpg')" alt="">
                <h4 class="size18 content_item_title b lh14 mb10">{{$t('Brand new community')}}</h4>
                <p class="lh15 mb10 size15">{{$t("Nothing is more free, more carefree, and more energetic than childhood. This mood can make people of all ages better, let us see the world in a more vivid color, let us not be too harsh, let us project ourselves into the world like an amusement park. It is in this context that various voices come together to express their desire to make the future better. This desire is communicated through interesting channels and supported by technology. It is spread through music, fashion and art, and even expressed through virtual reality. Everything is influenced by modern retro style. From patterns to fresh colors, it exudes a retro atmosphere.")}}</p>
                <img class="Journal_img img mb50" :src="require('~/assets/image/about_us/about_6.jpg')" alt="">
                <h4 class="size18 content_item_title b lh14 mb10">{{$t('Bona fide')}}</h4>
                <p class="mb0 size15 c333 lh15">
                    {{$t('We are in an era that is inseparable from the Internet, and we are increasingly immersed in the new virtual world. We are beginning to realize that we need to explore new intimacy through ourselves and others in order to restore our "humanity" and discover new ways of collective connection based on sharing feelings and experiences. The first "feel" we need to re-explore is touch, which is the most direct feeling, which can convey human warmth and empathy, and is also the easiest to be perceived. We started with shared experiences and constantly evolving creative collaborations, which are full of empathy, allowing us to experience surprise, joy and kindness in our daily work. We can finally put the phone aside and disconnect from the network. In the product design, the shape is simple, refined and smooth, interpreting the minimalist style and simple and timeless beauty. Unusual textures, such as folds and bubble effects, highlight the unique charm of the shape. The color is clear and soft, usually with gray, beige, orange and black, or the purity of white is used to enhance its brightness.')}}
                </p>
            </div>
            <!-- Journal end -->
            <!-- Shipping & Returns start -->
            <div class="content_item">
                <h4 class="size18 content_item_title mb30 b">{{$t('SHIPPING TIME')}}</h4>
                <table class="content_item_table mb30">
                    <thead class="content_item_thead">
                        <tr class="tr">
                            <th class="th cfff ptb10 plr10">{{$t('CountryRegion')}}</th>
                            <th class="th cfff ptb10 plr10">{{$t('Mailing Method')}}</th>
                            <th class="th cfff ptb10 plr10">{{$t('Rate')}}</th>
                            <th class="th cfff ptb10 plr10">{{$t('Estimated Delivery Time')}}</th>
                        </tr>
                    </thead>
                    <tbody class="content_item_tbody">
                        <tr class="tr">
                            <td class="td size15 s3 ptb10 plr10">{{$t('United States &  Canada')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('USPS')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('$5.95*')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('8-10 days')}}</td>
                        </tr>
                        <tr class="tr">
                            <td class="td size15 s3 ptb10 plr10">{{$t('United States &  Canada')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('UPS/DHL/FEDEX')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('$12.95*')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('5-6 days')}}</td>
                        </tr>
                        <tr class="tr">
                            <td class="td size15 s3 ptb10 plr10">{{$t('Europe')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('Local postal express')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('$6.95*')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('8-10 days')}}</td>
                        </tr>
                        <tr class="tr">
                            <td class="td size15 s3 ptb10 plr10">{{$t('Europe')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('DHL/UPS/\/FEDEX')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('$12.95*')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('5-6 days')}}</td>
                        </tr>
                        <tr class="tr">
                            <td class="td size15 s3 ptb10 plr10">{{$t('Australia & New Zealand')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('Local postal express')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('$6.95*')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('8-10 days')}}</td>
                        </tr>
                        <tr class="tr">
                            <td class="td size15 s3 ptb10 plr10">{{$t('Australia & New Zealand')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('DHL/UPS//FEDEX')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('$12.95*')}}</td>
                            <td class="td size15 s3 ptb10 plr10">{{$t('5-6 days')}}</td>
                        </tr>
                    </tbody>
                </table>
                <h4 class="size18 content_item_title mb30 b">{{$t('Refund policy')}}</h4>
                <p class="mb30 lh15">{{$t('You have thirty (30) days from the date you receive the glasses to call us or email for a return request if you want to return them for any reason. If you made a mistake during the order, or you just don’t like the glasses, you can return them for a one-time-use 100% store credit (excluding shipping), or for a 50% refund (excluding shipping) to the credit or debit card or PayPal account.')}}</p>
                <p class="lh15 mb10 size15">{{$t('We will replace broken frames at no charge during this 2 years warranty period. If you feel there is a manufacturing error, return the glasses for inspection within the 30-day warranty period. If our inspection shows the glasses were made incorrectly, we will remake them for you at no charge. Lenses Defects in the anti-reflective (AR) coating and photochromic films are warrantied for one one year from the date of receipt. This warranty does not cover normal wear and tear to the frames, lenses, or coatings.')}}</p>
                <!-- <p class="mb30 lh15">We believe you will like our products. If for some reason you are not completely satisfied with the quality of the glasses, 
                you can easily get warranty service without any problems.</p>
                <p class="lh15 mb10 size15">I've received my glasses but would like to return them. How can I do this?</p>
                <p class="lh15 mb10 size15">Please follow the steps below:</p>
                <p class="lh15 mb10 size15">1. Contact our Customer Service Department  to approve the return.</p>
                <p class="lh15 mb10 size15">2. All returns must be returned in their unworn, original, condition, in the original case include an eyeglass case and lens cleaning cloth.</p>
                <p class="lh15 mb10 size15">3. Package your glasses securely and make sure to include your name, contact information order number and why you returned the glasses</p>
                <p class="lh15 mb10 size15">4. We recommend shipping your return by a traceable method.</p>
                <p class="lh15 mb10 size15">5. Once your return is received, we will process refund in 5 working days. Your refund will be credited back to your original method of payment.</p>
                <p class="lh15 mb10 size15">6. Once your refund has been processed, it will take 7 to 10 business days for your bank to process the credit and apply it to your account.</p> -->
            </div>
            <!-- Shipping & Returns end -->
        </div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "~/components/common/Breadcrumb";
import { spliteParams } from '~/utils/Utils';
export default {
    name: 'aboutUs',
    async asyncData({ req, params, query, route, store }) {
        // 获取路由层级
        let arr = await spliteParams(route.fullPath);
        return {
            breadcrumbTtem: arr || []
        }
    },
    components: {
        BreadCrumb
    },
    mounted() {
        function Tab(id) {
            var tabWrapper = document.getElementById(id);
            this.tabBtn = tabWrapper.querySelectorAll(".nav_title li");
            this.tabDiv = tabWrapper.querySelectorAll(".content .content_item");

            for (var i = 0; i < this.tabBtn.length; i++) {
                this.tabBtn[i].index = i;
                var _this = this;
                this.tabBtn[i].onclick = function () {
                    _this.clickBtn(this);
                }
            }
        };
        Tab.prototype.clickBtn = function (btn) {
            for (var j = 0; j < this.tabBtn.length; j++) {
                this.tabBtn[j].classList.remove('about_nav_active');
                this.tabDiv[j].style.display = "none";
            }
            btn.classList.add("about_nav_active");
            this.tabDiv[btn.index].style.display = 'block';
        }
        window.onload = function () {
            var tab1 = new Tab('about_us');
            let content_item=document.getElementsByClassName('content_item');
            let liBox=document.getElementsByClassName('nav_title-lz')[0];
            let aLi=liBox.getElementsByTagName('li');
            let oUrl=window.location.search;
            function getUrlParams(str){
                let paramsStr=str.substring(1);
                let paramsArr=paramsStr.split('&');
                let paramsJson={};
                for(let i=0; i<paramsArr.length; i++){
                    let arr2=paramsArr[i].split('=');
                    paramsJson[arr2[0]]=arr2[1];
                }
                return paramsJson;
                
            }
            let jsonLz = '';
            if(oUrl){
                jsonLz=getUrlParams(oUrl);  
            }
            
            if(jsonLz && jsonLz.indexlz){
                
                for(let i=0; i<content_item.length; i++){
                    content_item[i].style.display='none';
                    aLi[i].classList.remove('about_nav_active');
                }
                content_item[parseInt(jsonLz.indexlz)].style.display='block';
                aLi[parseInt(jsonLz.indexlz)].classList.add('about_nav_active');
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~/assets/scss/index.scss';
.about_nav_active {
    color: $c333;
}
.about_us .content {
    border-left: 1px solid $c999;
}
.choose_box_ul {
    justify-content: space-between;
    flex-wrap: wrap;
}
.choose_box_li {
    width: 32%;
    min-height: 180px;
    background: #cef0fb;
    border: 1px solid $c999;
}
.about_us .content_item_table {
    border: 1px solid $ddd;
}
.about_us .content_item_thead {
    background: $theme;
}
.about_us .content_item_table .tr {
    border-bottom: 1px solid $ddd;
}
</style>